<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/abc.css">

    <title>用户管理</title>
<style rel="stylesheet" type="text/css">
    .w3l-signup {
        position: relative;
        height: 100vh;
        background: url(../img/2k.jpg) no-repeat 0px 0px;

        background-size: cover;
    }
</style>

    <script src="../js/jquery-3.2.1.min.js"></script>

    <link rel="stylesheet" href="../layui/css/layui.css">


</head>
<body>
<section class="w3l-signup">
    <!--导航栏-->
    <div class="left">
        <ul class="layui-nav layui-nav-tree layui-nav-side daohanglan">

            <li class="layui-nav-item "><a href="/user/yonghu"><i class="layui-icon layui-icon-user"></i>   用户管理</a></li>
            <li class="layui-nav-item "><a href="/user/shangjia "><i class="layui-icon layui-icon-website"></i>   商家供货</a></li>
            <li class="layui-nav-item "><a href="/user/dingdan "><i class="layui-icon layui-icon-cart-simple"></i>   订单下达</a></li>
        </ul>
    </div>
    <!--右侧-->

    <div class="right " id="tab">
        <div class="neirongqu">


            <table class="layui-table cssfd" id='tabletest'>
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>名字</th>
                    <th>密码</th>
                    <th>身份</th>
                    <th>删除</th>
                </tr>

                </thead>
                <tbody>

                </tbody>
            </table>


            <form class="layui-form" id="abc">

                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="uname" required lay-verify="required" placeholder="请输入姓名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="upassword" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">身份</label>
                    <div class="layui-input-inline">
                        <select name="shenfen" lay-verify="">
                            <option value="">请选择您的身份</option>
                            <option value="顾客">顾客</option>
                            <option value="商家">商家</option>
                        </select>

                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <script src="../layui/layui.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                //Demo
                layui.use('form', function () {
                    var form = layui.form;

                    // //监听提交
                    form.on('submit(formDemo)', function (data) {
                        // layer.msg(JSON.stringify(data.field));

                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            url: "../yonghu/zhucebt",//url
                            data: $('#abc').serialize(),
                            success: function (data) {
                                //  window.location.reload();
                            }

                        });
                    });
                });
            </script>

        </div>
    </div>


</section>

<script>

    $(function () {

        // alert("hello btn");
        // 发送ajax请求
        $.ajax({
            // 编写json格式，设置属性和值
            url: "../yonghu/findall",
            dataType: "json",
            type: "post",
            success: function (data) {
                var str = "";//定义用于拼接的字符串
                for (var i = 0; i < data.length; i++) {
                    //拼接表格的行和列
                    str = " <tr> <td>" + data[i].uname + "</td> <td>" +
                        data[i].upassword + "</td><td>" + data[i].shenfen +
                        "</td><td><input type=\"button\" value=\"删除\" class=\"layui-btn  qwe\" onclick=\"del(this)\"></td> </tr>";
                    //追加到table中
                    $("#tabletest").append(str);
                }
            }
        });

    });

    function del(obj) {
        // alert($(this).html());
        var dcm = $(obj).parents("tr").children(":first");
        var tyr = dcm.text();
        $.ajax({
            //几个参数需要注意一下
            type: "post",//方法类型
            url: "../yonghu/deleteyonghu",//url
            data: {"uname": tyr},
            success: function (data) {
                alert("删除成功");
                window.location.reload();

            }, error: function () {
                alert("删除失败");
                window.location.reload();
            }

        });
    }


</script>
</body>
</html>
